<template>
  <div class="login-box flex-row">
    <div class="flex_1 flex-col">
      <div class="company flex-row-center">
        深圳陆纳信息技术有限公司
      </div>
      <div class="flex-col center-center" style="flex: 1">
        <div class="appTitle">消毒供应中心管理系统</div>
        <div class="appSubTitle">Disinfection Supply Center Management System</div>
      </div>
      <div class="flex-col center-center" style="flex: 3">

      </div>
    </div>
    <div class="flex_1">
      <el-form label-position="top"
               ref="ruleFormRef"
               :model="data.ruleForm"
               :rules="rules"
               class="demo-ruleForm">

        <div class="flex-col center-center">
          <div class="login_title">欢迎登录</div>
        </div>
        <el-form-item style="margin-top: 24px;" label="账号" prop="userName">
          <el-input clearable style="background-color: white" size="large" :prefix-icon="User" @input="onUserIdChanged"
                    v-model="data.ruleForm.userName"
                    placeholder="Please input"/>

        </el-form-item>


        <el-form-item style="margin-top: 24px" label='部门' prop="officeName">
          <el-select size="large" class="w_full" placeholder="请选择部门" value-key="value"
                     v-model="data.ruleForm.selectOfficeCode" clearable autocomplete="off">
            <template #prefix>
              <el-icon>
                <HotWater/>
              </el-icon>
            </template>
            <el-option v-for="item in data.officeList"
                       :key="item.officeCode"
                       :label="item.officeName"
                       :value="item.officeCode"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item style="margin-top: 24px" label="密码" prop="password">
          <el-input clearable size="large" :prefix-icon="Lock"
                    v-model="data.ruleForm.password"
                    type="password"
                    autocomplete="off"
          />
        </el-form-item>

        <el-form-item style="margin-top: 58px;">
          <el-button size="large" class="loginBtn w_full" type="primary" @click="clickOnLogin">登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {reactive, ref} from "vue";
import {OfficeInfoVO} from '@/type/vo/OfficeInfoVO'
import type {FormInstance} from 'element-plus'
import {useRouter} from 'vue-router'
import {api_getOfficeList, api_login} from "@/request/apis/loginApi";
import md5 from 'md5';
import {useUserStore} from '@/store/user'
import {HotWater, Lock, User} from "@element-plus/icons-vue";
import msg from "@/components/msg";


const data = reactive({
  ruleForm: {
    userName: '',
    password: '',
    selectOfficeCode: '',
    office: {} as OfficeInfoVO
  },
  officeList: Array<OfficeInfoVO>()
})
const rules = {
  userName: [
    {
      required: true,
      message: '请输入账号',
      trigger: 'blur'
    },
    {
      min: 1,
      message: '长度至少大于1',
      trigger: 'blur'
    },
  ],
  password: [
    {
      required: true,
      message: '请输出你的密码',
      trigger: 'blur',
    },
  ],
};

const ruleFormRef = ref<FormInstance>();
const router = useRouter();


const onUserIdChanged = async () => {
  data.officeList.splice(0, data.officeList.length);
  const userId = data.ruleForm.userName;
  console.log(data.ruleForm.userName);
  let r_officeList = await api_getOfficeList(userId);//请求科室
  if (r_officeList.code != 0) {
    return;
  }
  r_officeList.data.forEach(item => {
    data.officeList.push({officeCode: item.officeCode, officeName: item.officeName});
  })
  if (data.officeList.length > 0) {
    data.ruleForm.office = data.officeList[0];
  }
}

const userStore = useUserStore()
const clickOnLogin = async () => {

  let pwd = md5(data.ruleForm.password);
  let r_officeList = await api_login(data.ruleForm.userName, pwd, data.ruleForm.office.officeCode);//请求科室

  if (r_officeList.code != 0) {
    await msg.error(`登录失败,code:${r_officeList.code}, msg：${r_officeList.msg}`);
    return;
  }
  userStore.login(r_officeList.data);
  localStorage.setItem('token', r_officeList.data.tokenId);
  // localStorage.setItem('userInfo', r_officeList.data);
  await router.push('/')
}


</script>

<style lang="scss" scoped>
.login-box {
  width: 100%;
  height: 100%;
  background-image: url("../assets/login_bg.png");
  /* 背景图垂直、水平均居中 */
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;
  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
  background-attachment: fixed;
  /* 让背景图基于容器大小伸缩 */
  background-size: cover;
  /* 设置背景颜色，背景图加载过程中会显示背景色 */
  background-color: #464646;
}

.login_title {
  font-size: 28px;
  font-weight: 400;
  color: #0A1629;
  line-height: 33px;
}

.company {
  margin-left: 32px;
  margin-top: 24px;
  font-size: 24px;
  font-weight: 500;
  color: #757575;
  line-height: 28px;
}

.appTitle {
  font-size: 48px;
  font-weight: 400;
  color: #000000;
  line-height: 56px;
}

.appSubTitle {
  margin-top: 8px;

  font-size: 22px;
  font-weight: 400;
  color: #000000;
  line-height: 26px;
}


.demo-ruleForm {
  width: 500px;
  margin: 200px auto;
  background-color: white;
  padding: 50px;
  border-radius: 13px;


}

.loginBtn {
  margin: auto;
}

h2 {
  margin-bottom: 20px;
}
</style>
